<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>响应式布局</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- build:css css/combined.css -->
    <link rel="stylesheet" href="css_init.css">
    <link rel="stylesheet" href="index.css">
    <title></title>
  </head>
  <body>
    <div class="container">
      <header class="top">
       <hgroup>
         <h1 class="top-title">我是主标题</h1>
         <h2 class="sub-title">我是副标题</h2>
       </hgroup>
       <p>
         我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题
         我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题
       </p>
      </header>

      <nav>
        <div class="menu">
          菜单展示
        </div>
        <a href="#">菜单>></a>
        <ul class="menu-item">
          <li><a href="#"> 主页 </a></li>
          <li><a href="#"> 产品 </a></li>
          <li><a href="#" class="menu-item-click"> 项目 </a>
            <ul class="second-menu-item">
              <li><a href="#">Node.js</a></li>
              <li><a href="#">three.js</a></li>
              <li class="third-menu-item-click">
                <a href="#">CQRS.js</a>
                <ul class="third-menu-item">
                    <li><a href="#">c.js</a></li>
                    <li><a href="#">q.js</a></li>
                    <li><a href="#">rs.js</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#"> 关于我们 </a></li>
        </ul>
      </nav>

      <div class="main">
         <section class="product-list">
            <h1> 产品展示 </h1>
            <div class="product">
               <h4> 产品名称 </h4>
               <img src="p.jpg" alt="">
               <p> 产品描述 </p>
            </div></section>
      </div>

    </div>

    <script src="index.js" charset="utf-8"></script>
  </body>
</html>
